/**
* Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
* All Rights Reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are NOT permitted except as agreed by
* iAuto (Shanghai) Co., Ltd.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*/


import React, { useState, ChangeEvent } from "react";
import { Input } from 'antd';

interface VersionProps {
    majorVersion: string;
    minorVersion: string;
}

interface SocVersionInputProps {
    setMajorVal: (value: string) => void;
    setMinorVal: (value: string) => void;
}

const SocVersionInput: React.FC<SocVersionInputProps> = ({ setMajorVal, setMinorVal }) => {
    const [importCarModeVersion, setImportCarModeVersion] = useState<VersionProps>({
        majorVersion: '',
        minorVersion: '',
    });
    const importVerSpanStyle = {
        display: 'inline-block',
        padding: '0 6px',
        borderRight: 'none',
        lineHeight: 2,
        color: '#666',
        textAlign: "right" as const,
    };

    const handleMajorVersionChange = (event: ChangeEvent<HTMLInputElement>) => {
        event.persist();
        const value = event.target.value;
        // 移除非数字字符
        const sanitizedValue = value.replace(/\D/g, '');
        // 将纯数字字符串显示在输入框中
        event.target.value = sanitizedValue;

        // 验证最小值为 1，最大值为 4
        let clampedValue = sanitizedValue;
        if (sanitizedValue !== '') {
            const numValue = Number(sanitizedValue);
            if (numValue < 1) {
                clampedValue = '1';
            } else if (numValue > 4) {
                clampedValue = '4';
            }
        }

        setImportCarModeVersion(prevData => ({
            ...prevData,
            majorVersion: clampedValue,
        }));
        setMajorVal(clampedValue);
    };

    const handleMinorVersionChange = (event: ChangeEvent<HTMLInputElement>) => {
        event.persist();
        const value = event.target.value;
        // 移除非数字字符
        const sanitizedValue = value.replace(/\D/g, '');
        // 将纯数字字符串显示在输入框中
        event.target.value = sanitizedValue;

        setImportCarModeVersion(prevData => ({
            ...prevData,
            minorVersion: sanitizedValue,
        }));
        setMinorVal(sanitizedValue);
    };

    return (
        <>
            <span style={importVerSpanStyle}> V</span>
            <Input
                maxLength={1}
                style={{ width: 40, textAlign: 'center' }}
                value={importCarModeVersion.majorVersion}
                onChange={handleMajorVersionChange}
            />
            <span style={importVerSpanStyle}> .</span>
            <Input
                maxLength={8}
                style={{ width: 100 }}
                value={importCarModeVersion.minorVersion}
                onChange={handleMinorVersionChange}
                placeholder="请输入版本"
            />
        </>
    );
};

export default SocVersionInput;